<template>
  <div>
    <span>{{count}}</span> &nbsp;&nbsp;<button @click="setCount(10)">setCount</button>
    <br />
    <span>{{list}}</span> &nbsp;&nbsp;<button @click="setList">setList</button>
    <br />
    <span>{{obj}}</span> &nbsp;&nbsp;<button @click="setObj({'name':'chenzhu', 'age' : 38 })">setObj</button>
    <br />
  </div>
</template>

<!-- 响应式数据 -->
<script setup>
  import {ref} from 'vue';

  const count = ref(0);
  const setCount = (value) =>{
    count.value = value;
  }

  const list = ref([0,1,2,3,4])
  const setList = () =>{
    list.value = list.value.filter( x=> x>=2)
  }

  const obj = ref({
    name : 'chenbin',
    age : 35
  })
  const setObj = (val) =>{
    obj.value.name = val.name;
    obj.value.age = val.age;
  }
</script>

<style scoped>

</style>
